﻿
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="styles/bootstrap.css">
  <link rel="stylesheet" href="styles/style.css" />
  <link rel="stylesheet" href="../dist/angular-datepicker.css" />
</head>
<body ng-app="sample">
  <div class="row-fluid" ng-controller="DemoController">
    <div class="span4">
      <div>
        <h2>Timezones</h2>

        <div ng-repeat="timezone in timezones">

          <h4>{{timezone[0]}}</h4>

          <div date-picker="dates.today" timezone="{{timezone[1]}}" view="hours" min-view="hours" watch-direct-changes="true"></div>

          <hr />

        </div>

        <h4>No timezone (Uses local)</h4>

        <div date-picker="dates.today" view="hours" min-view="hours" watch-direct-changes="true"></div>

      </div>
      <hr />

      <h2>Custom formats</h2>
      <div ng-repeat="format in formats">
        <h5>{{format}}</h5>
        <input type="text" date-time ng-model="dates.today" view="hours" format="{{format}}">
      </div>

    </div>
    <div class="span4">
      <h2>Minimum / Maximum dates</h2>

      <div>
        <h4>Always open div (date-picker directive)</h4>

        <div>
          <h5>Minimum</h5>
          <div date-picker="dates.today" id="pickerMinDateDiv" min-date="minDate" view="date" min-view="hours" timezone="UTC" watch-direct-changes="true"></div>
        </div>

        <div>
          <h5>Maximum</h5>
          <div date-picker="dates.today" id="pickerMaxDateDiv" max-date="maxDate" view="date" min-view="hours" timezone="UTC" watch-direct-changes="true"></div>
        </div>

        <div>
          <h5>Minimum + maximum</h5>
          <div date-picker="dates.today" id="pickerBothDatesDiv" min-date="minDate" max-date="maxDate" view="date" min-view="hours" timezone="UTC" watch-direct-changes="true"></div>
        </div>
      </div>

      <div>
        <h4>Input with popup (date-time directive)</h4>

      <form name="demoForm">
      <div>
        <h5>Min ({{demoForm.pickerMinDate.$error.min ? 'Min: invalid' : 'Min: valid'}})</h5>        
        <input date-time name="pickerMinDate" ng-model="dates.today" id="pickerMinDate" min-date="minDate" view="date" min-view="hours" timezone="UTC" format="lll">
      </div>

      <div>
        <h5>Max ({{demoForm.pickerMaxDate.$error.max ? 'Max: invalid' : 'Max: valid'}})</h5>
        <input date-time name="pickerMaxDate" ng-model="dates.today" id="pickerMaxDate" max-date="maxDate" view="date" min-view="hours" timezone="UTC" format="lll">
      </div>

      <div>
        <h5>Min + max ({{demoForm.pickerBothDates.$error.min ? 'Min: invalid, ' : 'Min: valid, '}} {{demoForm.pickerBothDates.$error.max ? 'max: invalid' : 'max: valid'}})</h5>
        <input date-time name="pickerBothDates" ng-model="dates.today" id="pickerBothDates" min-date="minDate" max-date="maxDate" view="date" min-view="hours" timezone="UTC" format="lll">
      </div>
    </form>
      </div>

      <div>
        <h2>Range</h2>

        <div date-range id="pickerRange" start="dates.minDate" end="dates.maxDate" date-change="changeDate" view="date" min-view="date" timezone="UTC"></div>

      </div>

    </div>
    <div class="span4">
      <h2>Update events</h2>
      <div>
        <h4>Minimum date</h4>
        <input date-time ng-model="dates.minDate" id="pickerMinSelector" date-change="changeMinMax" max-date="maxDate" view="date" timezone="UTC" format="lll">
      </div>
      <div>
        <h4>Maximum date</h4>
        <input date-time ng-model="dates.maxDate" id="pickerMaxSelector" date-change="changeMinMax" min-date="minDate" view="date" timezone="UTC" format="lll">
      </div>

      <div>
        <h4>Default view</h4>

        <select ng-change="changeData('view')"
                ng-options="view for view in views"
                ng-model="options.view"></select>
      </div>

      <div>
        <h4>Min view</h4>

        <select ng-change="changeData('minView')"
                ng-options="view for view in views"
                ng-model="options.minView">
          <option value="">Disabled</option>
        </select>
      </div>

      <div>
        <h4>Max view</h4>

        <select ng-change="changeData('maxView')"
                ng-options="view for view in views"
                ng-model="options.maxView">
          <option value="">Disabled</option>
        </select>
      </div>

      <div>
        <h4>Format</h4>

        <select ng-change="changeData('format')"
                ng-options="format for format in formats"
                ng-model="options.format">
          <option value="">Disabled</option>
        </select>
      </div>

      <h2>Callback</h2>
      <div>
        <h4>Select a date from either picker</h4>
        <div ng-bind="callbackState"></div>
        <button ng-click="callbackState = 'Callback: Not fired'">Reset state</button>
      </div>
      <input type="text" date-time ng-model="dates.today"  view="hours" date-change="changeDate">
      <div date-picker="dates.today" view="date" date-change="changeDate" timezone="UTC" watch-direct-changes="true"></div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.4.1/moment-timezone-with-data.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.6.0/ui-bootstrap-tpls.min.js"></script>
  <script src="scripts/datePicker.js"></script>
  <script src="scripts/datePickerUtils.js"></script>
  <script src="scripts/dateRange.js"></script>
  <script src="scripts/input.js"></script>
  <script>
    var demoApp = angular.module('sample', ['datePicker', 'ui.bootstrap']);
    demoApp.controller('DemoController', function ($scope) {
      $scope.dates = {
        today: moment.tz('UTC').hour(12).startOf('h'), //12:00 UTC, today.
        minDate: moment.tz('UTC').add(-4, 'd').hour(12).startOf('h'), //12:00 UTC, four days ago.
        maxDate: moment.tz('UTC').add(4, 'd').hour(12).startOf('h'), //12:00 UTC, in four days.
      };

      $scope.options = {
        view: 'date',
        format: 'lll',
        maxView: false,
        minView: 'hours',
      };

      $scope.minDate = $scope.dates.minDate;
      $scope.maxDate = $scope.dates.maxDate;

      $scope.formats = [
         "MMMM YYYY",
         "DD MMM YYYY",
         "ddd MMM DD YYYY",
         "D MMM YYYY HH:mm",
         "lll",
      ];

      $scope.timezones = [
        ['London, UK', 'Europe/London'],
        ['Hong Kong, China', 'Asia/Hong_Kong'],
        ['Vancouver, Canada', 'America/Vancouver'],
      ];

      $scope.views = ['year', 'month', 'date', 'hours', 'minutes'];

      $scope.callbackState = 'Callback: Not fired';

      $scope.changeDate = function (modelName, newDate) {
        console.log(modelName + ' has had a date change. New value is ' + newDate.format());
        $scope.callbackState = 'Callback: Fired';
      }

      $scope.changeMinMax = function (modelName, newValue) {
        //minDate or maxDate updated. Generate events to update relevant pickers

        var values = {
          minDate: false,
          maxDate: false,
        }

        if (modelName === 'dates.minDate') {
          values.minDate = newValue;
          $scope.$broadcast('pickerUpdate', ['pickerMinDate', 'pickerMinDateDiv', 'pickerMaxSelector'], values);
          values.maxDate = $scope.dates.maxDate;
        } else if (modelName === 'dates.maxDate') {
          values.maxDate = newValue;
          $scope.$broadcast('pickerUpdate', ['pickerMaxDate', 'pickerMaxDateDiv', 'pickerMinSelector'], values);
          values.minDate = $scope.dates.minDate;
        }

        //For either min/max update, update the pickers which use both.
        $scope.$broadcast('pickerUpdate', ['pickerBothDates', 'pickerBothDatesDiv'], values);
      }

      $scope.changeData = function (type) {
        var values = {},
            pickersToUpdate = ['pickerMinDate', 'pickerMaxDate', 'pickerBothDates', 'pickerMinDateDiv', 'pickerMaxDateDiv', 'pickerBothDatesDiv', 'pickerRange'];

        switch (type) {
          case 'view':
            values.view = $scope.options.view;
            break;
          case 'minView':
            values.minView = $scope.options.minView;
            break;
          case 'maxView':
            values.maxView = $scope.options.maxView;
            break;
          case 'format':
            values.format = $scope.options.format;
            break;
        }

        if (values) {
          $scope.$broadcast('pickerUpdate', pickersToUpdate, values);
        }
      }
    });
  </script>
</body>
</html>
